<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>惠普 | 首页</title>
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="shortcut icon" href="./images/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/home.css">

</head>
<style>
    .swiper-container {
        width: 100%;
        height: 600px;
    }
</style>

<body>
    <!-- 头部开始 -->
    <div class="header">
        <div class="tab">
            <div class="container">
                <div class="holder">
                    <div class="logo">
                        <div class="logo-icon">
                            <img src="./images/logo.png">
                        </div>
                        <div class="tit">
                            <div class="learn1">
                                <span class="font">深入了解</span>
                                <div class="list show">
                                    <div class="list-1">
                                        <p>电脑</p>
                                        <ul>
                                            <li>高端系列</li>
                                            <li>游戏系列</li>
                                            <li>家用电脑系列</li>
                                            <li>商用笔记本系列</li>
                                            <li>显示器</li>
                                            <li>Z系列工作站与VR</li>
                                            <li>商用台式机系列</li>
                                        </ul>
                                    </div>
                                    <div class="list-1">
                                        <p>打印</p>
                                        <ul>
                                            <li>家庭与家庭办公</li>
                                            <li>连供打印系列</li>
                                            <li>小印打印机</li>
                                            <li>高速扫描仪</li>
                                            <li>大幅面和数字印刷机</li>
                                            <li>3D打印</li>
                                        </ul>
                                    </div>
                                    <div class="list-1">
                                        <p>硒鼓和墨盒</p>
                                        <ul>
                                            <li>墨盒</li>
                                            <li>硒鼓</li>
                                        </ul>
                                    </div>
                                    <div class="list-1">
                                        <p>商务解决方案</p>
                                        <ul>
                                            <li>商务解决方案</li>
                                            <li>3D打印及数字化制造</li>
                                            <li>行业解决方案</li>
                                            <li>惠普服务</li>
                                            <li>电脑生命周期服务</li>
                                            <li>文印管理服务</li>
                                            <li>文印安全</li>
                                            <li>更多商务解决方案</li>
                                            <li>零售解决方案</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="learn1">
                                <span class="font">在线购物</span>
                                <div class="list show">
                                    <div class="list-1">
                                        <p>特点</p>
                                        <ul>
                                            <li>HP.com商店</li>
                                            <li>企业解决方案</li>
                                            <li>优惠销售</li>
                                        </ul>
                                    </div>
                                    <div class="list-1">
                                        <p>打印机及耗材</p>
                                        <ul>
                                            <li>个人和家用打印机</li>
                                            <li>商用打印机</li>
                                            <li>优惠活动</li>
                                            <li>硒鼓</li>
                                            <li>墨盒</li>
                                            <li>查看全部</li>
                                        </ul>
                                    </div>
                                    <div class="list-1">
                                        <p>笔记本及平板</p>
                                        <ul>
                                            <li>家用笔记本</li>
                                            <li>游戏笔记本电脑</li>
                                            <li>商用笔记本</li>
                                            <li>笔记本优惠</li>
                                            <li>查看全部</li>
                                            <li>家用台式机</li>
                                            <li>家用游戏台式机电脑</li>
                                            <li>商用台式机及一体机</li>
                                            <li>台式机及一体机优惠</li>
                                            <li>查看全部台式及一体</li>
                                        </ul>
                                    </div>
                                    <div class="list-1">
                                        <p>显示器与配件</p>
                                        <ul>
                                            <li>家用显示器</li>
                                            <li>商用显示器</li>
                                            <li>查看全部</li>
                                            <li>商用配件</li>
                                            <li>电脑配件</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="learn1">
                                <span class="font">支持</span>
                                <div class="list show">
                                    <div class="list-1">
                                        <p>特点</p>
                                        <ul>
                                            <li>HP.com商店</li>
                                            <li>企业解决方案</li>
                                            <li>优惠销售</li>
                                        </ul>
                                    </div>
                                    <div class="list-1">
                                        <p>打印机及耗材</p>
                                        <ul>
                                            <li>个人和家用打印机</li>
                                            <li>商用打印机</li>
                                            <li>优惠活动</li>
                                            <li>硒鼓</li>
                                            <li>墨盒</li>
                                            <li>查看全部</li>
                                        </ul>
                                    </div>
                                    <div class="list-1">
                                        <p>笔记本及平板</p>
                                        <ul>
                                            <li>家用笔记本</li>
                                            <li>游戏笔记本电脑</li>
                                            <li>商用笔记本</li>
                                            <li>笔记本优惠</li>
                                            <li>查看全部</li>
                                            <li>家用台式机</li>
                                            <li>家用游戏台式机电脑</li>
                                            <li>商用台式机及一体机</li>
                                            <li>台式机及一体机优惠</li>
                                            <li>查看全部台式及一体</li>
                                        </ul>
                                    </div>
                                    <div class="list-1">
                                        <p>显示器与配件</p>
                                        <ul>
                                            <li>家用显示器</li>
                                            <li>商用显示器</li>
                                            <li>查看全部</li>
                                            <li>商用配件</li>
                                            <li>电脑配件</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="search">
                                <input type="text" name="search" placeholder="搜索 HP.com">
                                <a href="javascript:;"><img src="./images/search.png" width="30px" class='s'></a>
                            </div>
                            <div class="login">
                                <a href="./login.html" class="login-btn">
                                    <p>登录</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 头部结束 -->
    <!-- 主体开始 -->
    <div class="body" id="body">
        <!-- 主体 top -->
        <div class="hp-blue">
            <div class="nav-con">
                <div class="text-cen">
                    <a href="javascript:;">聊天 &gt;</a>
                    <a href="javascript:;">COVID 19: 助您适应改变 &gt;</a>
                </div>
            </div>
        </div>
        <!-- 轮播图开始 -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="https://www.hp.com/content/dam/sites/worldwide/homepage/images/banners/CN-omen-gaming-desktop_v2.jpg" width='100%' height="100%">
                </div>
                <div class="swiper-slide">
                    <img src="https://www.hp.com/content/dam/sites/worldwide/homepage/images/banners/CN-laserjet-200-desktop.jpg" width='100%' height="100%">
                </div>
                <div class="swiper-slide">
                    <img src="https://www.hp.com/content/dam/sites/worldwide/homepage/images/banners/CN-pavilion-family-desktop.jpg" width='100%' height="100%">
                </div>
                <div class="swiper-slide">
                    <img src="https://www.hp.com/content/dam/sites/worldwide/homepage/images/banners/CISS-poseidon-desktop.jpg" width='100%' height="100%">
                </div>
                <div class="swiper-slide">
                    <img src="https://www.hp.com/content/dam/sites/worldwide/homepage/images/banners/CN-zhan-products-desktop1.jpg" width='100%' height="100%">
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev" style="width: 20px;"></div>
            <div class="swiper-button-next"></div>
        </div>
        <!-- 轮播图结束 -->
        <!-- 中间内容开始 -->
        <div class="mid">
            <div class="con-cen">
                <div class="cen-box">
                    <h3>
                        看看我们能怎么帮到您？
                    </h3>
                    <p>找到适合您的打印机或电脑</p>
                </div>
            </div>
            <!-- 有什么帮到你？ -->
            <div class="tab-tit">
                <div class="tab-con">
                    <ul class="list">
                        <li class="item col">笔记本</li>
                        <li class="item">商务本</li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 商品列 -->
        <div class="shop">
            <div class="shop-list">
            </div>
        </div>
        <!-- 中间内容结束 -->
        <!-- 搜索内容开始 -->
        <div class="s-con">
            <div class="s-box">
                <div class="s-top">
                    <h2>没看到合适的产品？</h2>
                    <p>搜您所要</p>
                </div>
                <div class="sou">
                    <form action="#" class="s-form">
                        <span class="icon">
                            <span class="icon-search">
                                <img src="./images/search.png" width="28">
                            </span>
                        <input type="text" placeholder="例如：家庭版" name="search" tabindex="100">
                        </span>
                        <a href="javascript:;" class="s-btn">
                            <span>搜索</span>
                        </a>
                    </form>
                </div>
            </div>
        </div>
        <!-- 搜索内容结束 -->
    </div>
    <!-- 主体结束 -->
    <footer class="footer">
        <div class="place">
            <div class="place-box">
                <span>国家/地区 :</span>
                <span>中华人民共和国</span>
            </div>
        </div>
        <div class="links">
            <div class="links-box">
                <div class="links-5">
                    <div class="link1">
                        <ul>
                            <li>
                                <span><a href="javascript:;">关于我们</a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">联系 HP </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">人才招聘 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">投资者关系 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">可持续性 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">新闻中心 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">车库 </a></span>
                            </li>
                        </ul>
                    </div>
                    <div class="link1">
                        <ul>
                            <li>
                                <span><a href="javascript:;">购买方式 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">在线商店 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">致电 HP 代表 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">查找经销商 </a></span>
                            </li>
                        </ul>
                    </div>
                    <div class="link1">
                        <ul>
                            <li>
                                <span><a href="javascript:;">支持</a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">下载驱动程序 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">支持和故障排除 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">社区 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">注册产品 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">服务中心地址查询 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">保修查询 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">培训与认证 </a></span>
                            </li>
                        </ul>
                    </div>
                    <div class="link1">
                        <ul>
                            <li>
                                <span><a href="javascript:;">HP 合作伙伴</a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">合作伙伴门户网站 </a></span>
                            </li>
                            <li>
                                <span><a href="javascript:;" class="i-list">开发人员 </a></span>
                            </li>

                        </ul>
                    </div>
                    <div class="link1">
                        <ul>
                            <li>
                                <span><a href="javascript:;">保持互联</a></span>
                            </li>
                            <li>
                                <span>
                                    <a href="javascript:;" class="i-list">
                                        <span class="icon"><img src="./images/wechat.png"></span>
                                <span class="icon"><img src="./images/xinlang.png"></span>
                                </a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 备注信息 -->
                <div class="privacy">
                    <ul class="link">
                        <li>
                            <a href="javascript:;" class="link-m">召回&emsp; | </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="link-m">&emsp;产品回收&emsp; | </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="link-m">&emsp;可及性&emsp; | </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="link-m">&emsp;网站地图&emsp; | </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="link-m">&emsp;隐私&emsp; | </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="link-m">&emsp;使用条款&emsp; | </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="link-m">&emsp;Cookie 与广告支持&emsp; | </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="link-m">&emsp;沪ICP备15039448号-8&emsp; | </a>
                        </li>
                        <li>
                            <a href="javascript:;" class="link-m">&emsp;电子营业执照 </a>
                        </li>
                    </ul>
                    <div class="copy">
                        <p class="p">© Copyright 2021 HP Development Company, L.P.</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

</body>
<script src="./js/swiper-bundle.min.js"></script>
<script>
    var mySwiper = new Swiper('.swiper-container', {
        direction: 'horizontal', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        // 自动轮播
        autoplay: {
            delay: 2000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
    })
</script>
<script src="./js/promiseAjax.js"></script>
<script src="./js/cookie.js"></script>
<script src="./js/home.js"></script>

</html>